<template>
    <div class='printer-model-container'>
        <div class="model-left">
            <el-button type="info" v-for="item in tabList" :key="item.value" :class="{isActive: selectTabList.some((obj:any) => item.value === obj.value)}" @click="handleSelectTabList(item)">{{ item.name }}</el-button>
        </div>
        <div class="model-right" >
            <div class="model-right-content" v-html="generateHtml(page)"></div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { listLabel } from '@/api/manage/template';
import { generateHtml, generatePage } from '@/utils/generateHtml';
import { ref, computed, watchEffect } from 'vue';
const props = defineProps(['printerSize','modelValue']);
const emits = defineEmits(['update:modelValue']);
let tabList:any = ref([]);
listLabel().then(res=>{
	console.log(res,'所有标签');
	tabList.value = res.data;
});
const selectTabList = ref<any>([]); // 选中的标签有哪些
const width = computed(() => {
	const [width] = props.printerSize.split(' * ');
	return `${parseInt(width) * 8}`;
});

const height = computed(() => {
	const [, height] = props.printerSize.split(' * ');
	return `${parseInt(height) * 8}`;
});
function handleSelectTabList(val:any){
	const index = selectTabList.value.findIndex((item:any) => item.value === val.value);
	if(index > -1){
		selectTabList.value.splice(index, 1);
	}else{
		selectTabList.value.push(val);
	}
}
//  根据选中的数据生成对应的对象，根据对象渲染成html和打印机需要的页面
const page = computed(()=>{
	const elements:any[] = [];
	selectTabList.value.forEach((ele:any,index:number)=>{
		elements.push({
			x:8,
			y: index * 30 || 5,
			h:1,
			type:ele.type,
			content:'xxxxxxxxxxxx',
			name:`${ele.name}`
		});
	});
	return {
		size: { width: width.value, height: height.value },
		element:elements
	};
});
watchEffect(()=>{
	emits('update:modelValue', JSON.stringify(page.value) );
});

</script>
<style scoped lang='scss'>
.printer-model-container {
    display: flex;
    width: 100%;
    height: 400px;
    border-radius: 10px;
    .model-left {
        flex: 2;
        background-color: rgb(234, 234, 234);
        // display: flex;
        overflow-y: scroll;
        padding: 20px 0 0 10px;

        >button{
            margin: 5px 10px;
            width: 100px;
        }
        .isActive{
            background-color: rgb(230, 244, 201);
            color: #000;
        }
    }

    .model-right {
        position: relative;
        flex: 3;
        background-color: rgb(207, 207, 207);
        overflow: hidden;
        .model-right-content{
            position: absolute;
            display: inline-block;
            border-radius: 10px;
            background: #fff;
            text-align: center;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            
        }
        
    }

}
</style>@/api/manage/template